<template>
  <div class="customer-info">
    <div class="customer-item" v-for="(item, index) in items">
      <el-row type="flex" justify="space-between">
        <el-col :span="4">
          <div class="item-name">
            <span>{{item.Name}}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="item-category">
            <span>{{item.Name}}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="item-account">
            <div v-if="item.group === '0'" style="display: inline-block; position: relative; top: -10px;">
              <p style="margin: 0px; padding: 0px;">ID {{item['Bp Number']}}</p>
            </div>
            <div v-if="item.group === '1'" style="display: inline-block; position: relative; top: -10px;">
              <p style="margin: 0px; padding: 0px;">{{item.Accounts}}</p>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="item-machine">
            <span>{{item.Machines}}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="item-claim">
            <span>{{item.repair_so}}</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.customer-info {
  .customer-item {
    margin: 10px;
    background-color: #fff;
    height: 75px;
    min-width: 1208px;
    border: 1px solid #ccc;
    border-radius: 6px;
    .el-col {
      /*border: 1px solid #000;*/
      height: 75px;
      line-height: 75px;
      .item-name {
        /*width: 310px;*/
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      span {
        margin-left: 28px;
        font: 18px Helvetica, Regular ;
        color: #444c5a;
      }
    }
  }
}
</style>

<script>
  export default {
    data() {
      return {
        item: [
          {
            itemName: 'Lenovo',
            // itemName: 'Lenovo Ttttttttttttttttdjkfjdkjfkddfd',
            itemCategory: 'Group',
            itemAccount: 333333,
            itemMachine: 353434,
            itemClaim: 34
          }, {
            itemName: 'Lenovo Ttttttttttttttttdjkfjdkjfkddfd',
            itemCategory: 'Group',
            itemAccount: 333333,
            itemMachine: 353434,
            itemClaim: 34
          },
          {
            itemName: 'Lenovo',
            // itemName: 'Lenovo Ttttttttttttttttdjkfjdkjfkddfd',
            itemCategory: 'Group',
            itemAccount: 333333,
            itemMachine: 353434,
            itemClaim: 34
          },
        ]
      }
    },
    props: ['items']
  }
</script>
